import React, { Component, PropTypes } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { propType, filter } from 'graphql-anywhere';
import { StyleSheet, FlatList, TouchableOpacity, Text } from 'react-native';
import { Button } from 'react-native-elements';
import { primaryColor } from '../utils'; 

const styles = StyleSheet.create({
  text: { 
    color: '#86939e',
    paddingHorizontal: 12,
    paddingVertical: 14
  },
  selectContainer: {
    backgroundColor: '#F5F5F5',
    borderBottomColor: primaryColor,
    borderBottomWidth: 2
  }
});

class ClothCategoryHorBar extends Component {
  componentDidMount() {
    if (this.props.categories&&this.props.categories[0]) {
      this.props.onSelect(this.props.categories[0]);
    }
  }
  componentWillReceiveProps(nextProps) {
    if (!this.props.categories&&nextProps.categories&&nextProps.categories[0]) {
      this.props.onSelect(nextProps.categories[0]); 
    }
  }
  renderItem = ({item}) => {
    return (
      <TouchableOpacity style={this.props.select===item.id?styles.selectContainer:null} onPress={()=>this.props.onSelect(item)}>
        <Text style={styles.text}>{item.name}</Text>
      </TouchableOpacity>
    );
  }
  keyExtractor = (item) => item.id
  render() {
    return (
      <FlatList horizontal keyExtractor={this.keyExtractor} extraData={this.props.select} data={this.props.categories}
        renderItem={this.renderItem} containerStyle={this.props.style}/>
    );
  }
}

export default graphql(gql`
  query ClothCategoryHorBar {
    categories {
      id
      name
    }
  }
`, {
  props: ({ownProps, data:{categories, loading}}) => {
    return {
      categories,
      loading
    };
  }
})(ClothCategoryHorBar);


